<template>
  <div class="recommend w2">
    <div class="left">
      <el-carousel trigger="click" arrow="never" :autoplay="true" :interval="5000">
        <el-carousel-item v-for="item in lunboList" :key="item._id">
          <div>
            <el-image :src="item.imgPath"></el-image>
            <p class="title">{{item.imgText}}</p>
          </div>
          <span class="lb-hover">
            更多
            <i class="el-icon-arrow-right"></i>
          </span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right">
      <div class="rec-vedio" v-for="item in recommendList " :key="item._id">
        <el-image :src="item.fmPath" lazy></el-image>
        <span class="rec-tips">
          <p>{{item.title}}</p>
          <span>{{item.author}}</span>
          <span>{{item.playnum}}</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lunboList: [],
      recommendList: [],
    }
  },
  async mounted() {
    this.lunboList = await this.getData('/index/lunboTop', 'imgPath')
    this.recommendList = await this.getData('/index/recommend', 'fmPath')
  },
  methods: {
    async getData(address, pathName) {
      const { data: res } = await this.$http.get(address)
      res.forEach((item) => {
        const path = 'http://127.0.0.1:3030/' + item[pathName]
        item[pathName] = path
      })
      return res
    },
  },
}
</script>
<style lang="less" scoped>
.el-carousel {
  position: relative;
}
.el-carousel__container {
  width: 550px;
  height: 242px;
}
.el-carousel:hover .lb-hover {
  opacity: 1;
}
.lb-hover {
  display: block;
  position: absolute;
  color: #fff;
  bottom: 50px;
  right: 20px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
  opacity: 0;
}
.recommend {
  padding: 0 0 30px;
  display: flex;
}
.rec-vedio {
  position: relative;
  float: left;
  width: 206px;
  height: 116px;
  background-color: #475669;
  margin-left: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.rec-vedio img {
  width: 100%;
  height: 100%;
}
.rec-tips {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 80px;
  left: 0;
  transition: all 0.2s;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
  font-size: 14px;
  padding: 10px 5px 5px 5px;
}
.rec-tips p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 500;
}
.rec-vedio:hover .rec-tips {
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px 5px 5px 5px;
}
.rec-vedio:hover .rec-tips p {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: all 0.2s;
}
.rec-tips span {
  display: block;
  padding-top: 5px;
  font-size: 12px;
  color: #ccc;
}
.title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 15px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
.left {
  width: 550px;
  height: 242px;
}
.right {
  width: 1070px;
  height: 242px;
  overflow: hidden;
}

@media screen and (max-width: 1450px) {
  .left {
    width: 459px;
    height: 202px;
  }
  .right {
    width: 540px;
    height: 202px;
  }
  .rec-vedio {
    width: 170px;
    height: 96px;
  }
  .rec-tips {
    top: 70px;
    padding: 0px 5px 0px 5px;
  }
  .rec-vedio:hover .rec-tips {
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 5px 5px 5px;
  }
}
</style>
